
const path = require('path')
module.exports = {
    // 打包环境:开发(development)||生产(production)
    mode: 'development',
    // 入口文件的配置项
    entry: {
        // 里面的main是可以随便写的,入口文件可以有多个,如果为多个可以用数组括起来;
        // main: ['babel-polyfill','./src/main.js'],
        main: ['./src/main.js'],
    },
    // 出口文件的配置项,注出口只能有一个文件
    output: {
        // 打包的路径,让它引入到我们的dist文件夹下
        path: path.resolve(__dirname, '../dist'),
        // 打包的文件名称
        /**filename:'bundle.js' 不能这样写死如果写死打包的时候会出名冲突
         *提示 Conflict: Multiple assets emit to the same filename bundle.js
         * 现在我们将原来写死的bundle.js给改成了  [name]-bundle.js
        **/
        filename: '[name]-bundle.js',//这里的name是告诉我们入口进去的文件名是什么名字,打包出来就是什么名字
        publicPath: '/',//如果是/在index.html中可以之直接引入 <script src="/main-bundle.js"></script>
        // publicPath:'/js',//如果是/js在index.html中可以之直接引入 <script src="/js/main-bundle.js"></script>


    },

    // 插件,用于生产模板和和项功能
    plugins: [],
    // 配置webpack开发服务功能
    devServer: {
        // 设置基本目录结构,让默认目录进入到dist文件来启动内容
        contentBase: 'dist',
        // 让页面出现报错提示
        overlay:true
    },
    // 模块:例如解读css,图片如何转换,压缩
    module: {
        rules:[
             // js loaders
             {
                test:/\.js$/,//匹配js
                use:[//加载器
                    {
                        loader:"babel-loader"
                    }
                ],//忽略转换的文件
                exclude:/node_modules/
            },
            {//匹配所有的css
                test:/\.css$/,
                use:[//分两种,style loader 写入到html中,css loader把样式放入到main benderjs中去
                    {
                        loader:'style-loader'
                    },
                    {
                        loader:'css-loader'
                    }

                ]
            },
            // 匹配所有Html loaders
            {
                test:/\.html$/,
                use:[
                    {//对html动态取名
                        loader:'file-loader',
                        options:{
                            name:"[name].html"
                        }
                    },
                    {//让html和bundle.js进行区分,因为之前加载css,js的时候都会融入到出口的bundle里面去,
                        loader:"extract-loader"
                    },
                    {/*
                        它会帮你找到html的文件然后会借助你的extract-loader跟你的js进行分离
                        然后file-loader会根据你html然后取名
                        *
                        */
                        loader:"html-loader",
                        options:{//配置图片的属性
                            attrs:["img:src"]
                        }
                    }
                ]
            },
            // image loader
            {
                test:/\.(jpg|git|png)$/,
                use:[
                    {  //加载路径
                        loader:"file-loader",
                        options:{//图片取名
                            name:"images/[name].[ext]"
                        }
                    }
                ]
            }
           
        ]
    },
}